<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${ctx}/css/sapar.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/common.css"/>
    <script type="text/javascript" src="${ctx}/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/js/sapar.js"></script>
    <script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
    <script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
    <script type="text/javascript" src="${ctx}/js/mask.js"></script>
    <title>一次品</title>
    <style type="text/css">
        .table-box input[type=text] {
            width: 150px;
            height: 28px;
            border-width: 1px;
            border-style: solid;
            border-left-color: #c5c5c5;
            border-top-color: #c5c5c5;
            border-right-color: #e0e0e0;
            border-bottom-color: #e0e0e0;
            *line-height: 28px;
            outline: none;
            /* background:url(../img/skin_/inputbg.png);*/
            padding: 0 10px;
            padding-left: 150px;
        }

        .caozuo {
            width: 10%;
            text-align: center;
        }

        input {
            align: center;
        }

        #rkr {
            margin-top: 10px;
            margin-left: 5px;
        }

        .table-box .iselect-wrapper {
            float: left;
            margin-right: 5px;
            width: 150px;
        }

        .table-box .iselect-wrapper .iselect {
            width: 150px;
        }
    </style>
</head>

<body>
<div id="mask" class="mask"></div>
<div id="saper-container">
    <div id="saper-hd"></div>
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2>入库信息</h2>
        </div>
        <form class="saper-form" id="dataForm">
            <div class="subfiled-content">
                <div class="search-box clearfix">
                    <div class="kv-item clearfix">
                        <label>发票编号：</label>
                        <div class="kv-item-content">
                            <input type="text" placeholder="发票编号" name="rukuFapiaohao"
                                   onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')" id="fpbh"/>
                        </div>
                    </div>
                    <div class="kv-item clearfix">
                        <label>备注：</label>
                        <div class="kv-item-content">
                            <input type="text" placeholder="备注" name="rukuBeizhu"/>
                        </div>
                    </div>
                </div>


                <!--表格开始-->
                <div class="table">
                    <!--表格操作-->
                    <div class="table-operate ue-clear">
                        <a href="javascript:;" class="add">添加行</a>
                        <a href="javascript:;" class="save">批量入库</a>
                    </div>
                    <!--表格具体内容-->
                    <div class="table-box">
                        <table>
                            <thead>
                            <tr>
                                <th>产品批次号</th>
                                <th>物品名称</th>
                                <th>物品数量</th>
                                <!-- <th>有效期(天)</th> -->
                                <th class="caozuo">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="row" id="option0">
                                <td><input type="text" placeholder="入库批次" name="productPici"
                                           onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"/><span
                                        class="impInfo">必填</span></td>
                                <td>
                                    <select name="productId" id="productId0" onchange="signPro('0')"
                                            style="width:250px;height:30px">
                                        <option value="">请选择</option>
                                        <c:if test="${proList != null}">
                                            <c:forEach items="${proList}" var="pro">
                                                <option value="${pro.productId}">${pro.productName}</option>
                                            </c:forEach>
                                        </c:if>
                                    </select><span class="impInfo">必选</span>
                                </td>
                                <td><input type="text" placeholder="物品数量" name="productNum" maxlength="11"
                                           onkeyup="this.value=this.value.replace(/\D/g,'')"/><span
                                        class="impInfo">必填</span></td>
                                <!-- <td><input type="text" placeholder="有效期（天）" name="productYouxiaoqiDays"/><span class="impInfo">必填</span></td> -->
                                <td><input type="hidden" name="productName" id="productName0" value=""/></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div><!--表格结束-->
                <%-- <div class="kv-item clearfix">
                        <label>入库人：</label>
                        <div id="rkr">
                            <input type="text" name="rukuRukurenTiaoma" placeholder="入库人名称" value="${searchTxt}" class="search_text" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"  >
                        </div>
                </div> --%>
            </div>
        </form>
    </div>
    <div id="saper-ft"></div>
</div>
</body>

<script type="text/javascript">
    $('select').iSelect();
    var proJson = eval('${proJson}');
    var tbLen = $(".table-box tbody").length;

    $(function () {
        $(".add").click(function () {
            tbLen++;
            console.log(tbLen);
            var str = "";
            str += "<tr id='option" + (tbLen) + "' class='row'>";
            str += "<td><input type=\"text\" placeholder=\"入库批次\" name=\"productPici\" onkeyup='this.value=this.value.replace(/(^\\s*)|(\\s*$)/g,\"\")'   /><span class=\"impInfo\">必填</span></td>";
            str += "<td>";
            str += "<select name=\"productId\" style=\"width:175px;height:30px\" id=\"productId" + tbLen + "\" onchange=\"signPro('" + tbLen + "')\">";
            str += "<option value=\"\">请选择</option>";
            for (var i = 0; i < proJson.length; i++) {
                str += "<option value=\"" + proJson[i].productId + "\">" + proJson[i].productName + "</option>";
            }
            str += "</select><span class=\"impInfo\">必选</span>";
            str += "</td>";
            str += "<td><input type=\"text\" placeholder=\"物品数量\" name=\"productNum\" onkeyup=\"this.value=this.value.replace(/\\D/g,'')\"/><span class=\"impInfo\">必填</span></td>";
            /* str +="<td><input type=\"text\" placeholder=\"有效期（天）\" name=\"productYouxiaoqiDays\"/><span class=\"impInfo\">必填</span></td>"; */
            str += "<td class=\"caozuo\"><a href=\"javascript:;\" onclick=\"del('option" + (tbLen) + "')\">删除</a><input type=\"hidden\" name=\"productName\" id=\"productName" + (tbLen) + "\" value=\"\"/></td>";
            str += "</tr>";
            console.log(str);
            $(".table-box tbody").append(str);
            $('select').iSelect();
        });

        $(".save").click(function () {
            var txt = $("#fpbh").val();
            var btn = true;
            $(".row input").each(function () {
                if ($(this).val() == '') {
                    btn = false;
                    layer.msg("必填项不为空");
                    return false;
                }
            });
            $("select").each(function () {
                if ($(this).val() == '') {
                    btn = false;
                    layer.msg("必选项不为空");
                    return false;
                }
            });
            if (isNullOrEmpty(txt)) {
                btn = false;
                layer.msg("请输入发票编号");
                return false;
            }
            if (btn) {
                showMask();
                $.ajax({
                    type: "POST",
                    url: "${ctx}/oneOff/yicipinSave.do",
                    data: $('#dataForm').serialize(),// 你的formid
                    error: function (request) {
                        layer.alert("网络故障，请稍后再试!");
                    },
                    success: function (data) {
                        $("#mask").hide();
                        if (data.status == "true") {
                            layer.alert("保存成功", function () {
                                window.location.href = "${ctx}/oneOff/yicipinList.do";
                            });
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                });
            }
        });


    });

    function signPro(i) {
        $("#productName" + i).val($("#productId" + i).find("option:selected").text());
    }

    function del(id) {
        $("#" + id).remove();
    }

    function isNullOrEmpty(strVal) {
        strVal = strVal.replace(/(^\s*)|(\s*$)/g, "");
        if (strVal == '' || strVal == null || strVal == undefined) {
            return true;
        } else {
            return false;
        }
    }
</script>
</html>